<template>
    <div class="container" :loading="loading">

        <el-alert title="配置邮件发送,保存将会自动发送一封测试邮件" type="success">
        </el-alert>

        <el-form style="margin-top: 10px" ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
            <el-form-item label="主机名" prop="host">
                <el-input v-model="formData.host" placeholder="请输入主机名" clearable prefix-icon='el-icon-s-platform'
                    :style="{ width: '100%' }"></el-input>
            </el-form-item>
            <el-form-item label="端口号" prop="port">
                <el-input v-model="formData.port" placeholder="请输入端口号" clearable prefix-icon='el-icon-view'
                    :style="{ width: '100%' }"></el-input>
            </el-form-item>
            <el-form-item label="用户名" prop="user">
                <el-input v-model="formData.user" placeholder="请输入用户名" clearable prefix-icon='el-icon-user'
                    :style="{ width: '100%' }"></el-input>
            </el-form-item>
            <el-form-item label="授权码" prop="pass">
                <el-input v-model="formData.pass" placeholder="请输入授权码" clearable prefix-icon='el-icon-lock'
                    :style="{ width: '100%' }"></el-input>
            </el-form-item>
            <el-form-item label="发件人" prop="from">
                <el-input v-model="formData.from" placeholder="请输入发件人" clearable prefix-icon='el-icon-message'
                    :style="{ width: '100%' }"></el-input>
            </el-form-item>
            <el-form-item label="SSL加密" prop="ssl">
                <el-switch v-model="formData.ssl"  active-value="1" inactive-value="0"></el-switch>
            </el-form-item>
            <el-form-item size="large">
                <el-button type="primary" @click="submitForm">保存</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>

import { listConfig,addConfig } from "@/api/db/mail"


export default {
    components: {},
    props: [],
    data() {
        return {

            loading: false,

            formData: {
                host: '',
                port: '',
                user: '',
                pass: '',
                from: '',
                ssl: "",
            },
            rules: {
                host: [{
                    required: true,
                    message: '请输入主机名',
                    trigger: 'blur'
                }],
                port: [{
                    required: true,
                    message: '请输入端口号',
                    trigger: 'blur'
                }],
                user: [{
                    required: true,
                    message: '请输入用户名',
                    trigger: 'blur'
                }],
                pass: [{
                    required: true,
                    message: '请输入授权码',
                    trigger: 'blur'
                }],
                from: [{
                    required: true,
                    message: '请输入发件人',
                    trigger: 'blur'
                }],
            },
        }
    },
    computed: {},
    watch: {},
    created() { },
    mounted() { 
        this.getList();
    },
    methods: {
        getList() {
            this.loading = true
            listConfig().then(res => {
                let rList = res.rows;
                this.loading = false;
                if (rList.length > 0) {
                    this.formData = { ...rList[0] };
                }
            })
        },
        submitForm() {
            this.$refs["elForm"].validate(valid => {
                if (valid) {
                    addConfig(this.formData).then(response => {
                        this.$modal.msgSuccess("操作成功");
                        this.getList();
                    });
                }
            });
        },
    }
}

</script>
<style>
.container {

    padding: 20px;

}
</style>
  